<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2024-07-02 13:38:33
 * @LastEditTime: 2024-08-06 04:11:26
 * @FilePath: /xiaoquan-element/src/App.vue
-->
<script setup lang="ts">

</script>

<template>
    <div id="app">
        <Xq-Button>测试</Xq-Button>
        <Xq-Icon icon="gear" size="xl" shake />
        <Xq-Card img-src="/yz.jpg" summary="英斯迪尔（INSDEA）家用电脑椅男生游戏电竞椅座椅懒人电脑沙发椅卧室办工..." />
        <nav class="nav">
            <router-link to="/">Icon</router-link>
            <router-link to="/button">Button</router-link>
            <router-link to="/card">Card</router-link>
            <router-link to="/dialog">Dialog</router-link>
            <router-link to="/pager">Pager</router-link>
            <router-link to="/collapse">Collapse</router-link>
            <router-link to="/tooltip">Tooltip</router-link>
            <router-link to="/dropdown">Dropdown</router-link>
        </nav>
        <router-view/>
    </div>
</template>


<style lang="scss" scoped>
h1.title {
    text-align: center;
    // margin-top: 5em;
    font-weight: 200;
}

.nav {
    display: flex;
    height: 50px;
    justify-content: space-evenly;
    align-items: center;
}

.displayArea {
    margin-top: 2em;
}
.active {
    border-bottom: 3px solid hsla(160, 100%, 37%, 1);
}
</style>